<template>
  <view class="album-item-box">
    <view class="item-image">
      <image src="/static/image/3.jpg" mode="aspectFix"></image>
    </view>
    <view class="item-content">
      <view class="title">
        {{ albumItemObj.title }}
      </view>
      <view class="descript">
        {{ albumItemObj.descript }}
      </view>
      <view class="btnAttention"> + 关注 </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    albumItemObj: {
      type: Object,
      require: true,
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.album-item-box {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 10rpx;
  border-bottom: 1px solid #ccc;
  .item-image {
    flex: 1;
    image {
      width: 254rpx;
      height: 254rpx;
    }
  }

  .item-content {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    // 为伸缩合作设置了 overflow: hidden 后伸缩盒子就不会被内容撑开了
    overflow: hidden;
    margin-left: 30rpx;
    .title {
      font-size: 35rpx;
      font-weight: 700;
    }

    .descript {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      color: #ccc;
    }

    .btnAttention {
      align-self: flex-end;
      border: 1px solid $themeColor;
      padding: 15rpx;
      font-size: 30rpx;
      color: $themeColor;
    }
  }
}
</style>
